<template>
    <div class="bill_tabs">
        <div style="display: flex">
            <div class="tab" v-for="item in tab" :class="item.value == acyivetabs.value ? 'active_tab' : ''"
                @click="changeacyivetabs(item.value)" :key="item.value">{{
                    item.label }}</div>
        </div>
        <div style="display: flex">
            <div class="bctype" @click="changeactivebctype(0)" :class="activetype == 0 ? 'active_bctype' : ''">软件账单
            </div>
            <div class="bctype" style="margin: 0 4px">/</div>
            <div class="bctype" @click="changeactivebctype(1)" :class="activetype == 1 ? 'active_bctype' : ''">平台账单
            </div>
        </div>

    </div>
</template>

<script setup>

const props = defineProps({
    acyivetabs: Object,
    activetype: Number
})

const tab = ref([
    {
        label: '上周',
        value: 0
    }, {
        label: '本周',
        value: 1
    }, {
        label: '上月',
        value: 2
    }, {
        label: '本月',
        value: 3
    },
])
const emits = defineEmits(['change'])
const changeacyivetabs = (value) => {
    props.acyivetabs.value = value
    emits('change')
}

const changeactivebctype = (value) => {
    console.log(value);

    emits('changeactivebctype', value)
}

</script>

<style lang="scss" scoped>
.bill_tabs {
    width: 100%;
    margin: 16px 0;
    display: flex;
    justify-content: space-between;
}

.bill_tabs {
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.tab {
    margin-right: 16px;
    cursor: pointer;
    font-size: 14px;
    color: #8a8a8a;
}

.active_tab {
    color: #ff7900;
}

.bctype {
    cursor: pointer;
    font-size: 14px;
    color: #8a8a8a;
}

.active_bctype {
    color: #ff7900;
}
</style>